<template>
  <a-modal
    title="转诊"
    width="600px"
    :visible.sync="visible"
    :confirmLoading="confirmLoading"
    @ok="submit"
    :bodyStyle="{padding:'12px 24px 0'}"
    @cancel="handleCancel"
  >
   <a-spin :spinning="spinning">
       <a-form :form="form" layout="vertical">
      <div class="row-wrapper" style="margin-bottom:5px">
       
        <a-row :gutter="12">
          <a-col :md="12" :sm="24" >客户姓名：{{row_record.name}}</a-col>
          <a-col :md="12" :sm="24" >客户卡号：{{row_record.cardNo}}</a-col>
        </a-row>
         <a-row :gutter="12">
          <a-col :md="12" :sm="24" >所属咨询：{{row_record.belConsultManId||"-"}}</a-col>
          <a-col :md="12" :sm="24" >开发人员：{{row_record.developerid||"-"}}</a-col>
        </a-row>
      </div>
      <div class="row-wrapper" style="margin-bottom: 0px;">
        <!-- <div class="title" >选择客户诉求</div> -->
        <a-row :gutter="12" >
         
           <a-col :span="24">
            <a-form :form="form" style="margin-top:2px" layout="inline" labelAlign="left" >
              <a-form-item
                label="客户诉求"
                style="display:flex;flex-direction:row;align-item:center;margin-bottom:0px"
                has-feedback
              >
                 <a-cascader
                      style="width:250px;margin-left:10px"
                      allow-clear        
                      expand-trigger="hover"
                      :show-search="{ filter }"
                      :options="ConsultationAppeal"
                      v-model="testArr"
                      placeholder="可选择,搜索"
                  />
              </a-form-item>
            </a-form>
          </a-col>
        </a-row>
      </div>
      <div class="row-wrapper">
        <!-- <div class="title">填写转出信息</div> -->
        <a-row :gutter="12">
          <a-col :span="12">
            <a-form-item label="转出人" style="margin-bottom:0px">
               <!-- v-decorator="['consultManId',{rules: [{ required: true, message: '请选择转出人！' }]}]" -->
               <!--  v-model="consultManId" -->
              <a-select
                allow-clear
                :showSearch="true"
                option-filter-prop="children"
                option-label-prop="label"
                style="width:255px;"
                placeholder="选择转出人，可搜索"
                v-decorator="['consultManId',{rules: [{ required: true, message: '请选择转出人！' }]}]"
               
              >
                <a-select-option v-for="item in sysUserArr" :key="item.id" :label="item.name" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
          <a-col :span="12">
            <a-form-item label="接收人" style="margin-bottom:0px">
              <a-select
                allow-clear
                :showSearch="true"
                option-filter-prop="children"
                option-label-prop="label"
                style="width:255px;"
                placeholder="选择接收人，可搜索"
                v-decorator="['takeId',{rules: [{ required: true, message: '请选择接收人！' }]}]"
              >
                <a-select-option v-for="item in sysUserArr" :key="item.id" :label="item.name" :value="item.id">
                  {{ item.name }}
                </a-select-option>
              </a-select>
            </a-form-item>
          </a-col>
        </a-row>
        <a-row :gutter="12">
          <a-col :span="18">
            <a-form-item label="转出原因" :wrapperCol="wrapperCol" style="margin-bottom:0">
              <a-textarea
                :maxLength="100"
                :rows="4"
                placeholder="请填写备注信息"
                v-decorator="['remark', {rules: [{ required: false, message: '请填写备注信息！' }]}]"
              >
              </a-textarea>
            </a-form-item>
          </a-col>
        </a-row>
      </div>
      </a-form>
   </a-spin>

   

  </a-modal>
</template>

<script>
import { dictTypeListForCode, receiveItem,referral ,getZXS} from '@/api/modular/main/customer/customerTriage'
import {
  getClientDemandName
} from '@/api/modular/main/customer/customerConsultation'


export default {
  data(){
    return{
      row_record:{},
      indeterminate:false,
      receiveItemName:[], // 客户诉求
      ConsultationAppeal:[],
      sysUserArr:[], //咨询师
      value: [],
      wrapperCol: {
        xs: { span: 24 },
        sm: { span: 15 }
      },
      disabled:true,
      visible: false,
      visibleTable: false,
      confirmLoading: false,
      form: this.$form.createForm(this),
      testArr:[],
      consultManId:"",
      spinning:false,
    }
  },
  methods:{
    add (row_record) {
      this.row_record = row_record
      console.log(this.row_record)
      this.spinning=true
      this.visible = true  
      new Promise ((resolve,reject)=>{
           //诉求项目
          receiveItem({receiveId:this.row_record.tbReceiveId}).then(res => {       
            this.receiveItemName=res.data
            // if(this.receiveItemName.length==1){
            //   this.form.setFieldsValue({
            //     'quoteItemList':[this.receiveItemName[0].value]
            //   })
            // }
            if(this.receiveItemName.length==1){
              // this.testArr=[res.data[0].dept_id,res.data[0].value]
              console.log("qitem",this.testArr)
              if(res.data[0]){
                this.testArr=[res.data[0].dept_id,res.data[0].value]
              }else{
                this.testArr=[]
              }
            }else{
                this.testArr=[]
            }
            resolve()
          })
      }).then(()=>{
          getClientDemandName().then(res => {
          this.ConsultationAppeal = res.rows     
          })     
         
      }).then(()=>{
           const XCZXS = this.$options.filters['dictType']('dropdown_config','XCZXS')
      //咨询师名单
      // dictTypeListForCode({code:XCZXS}).then(res=>{
      //   // this.sysUserArr = [res.userList].concat(res.userList)
      //   this.sysUserArr = res.userList
      //   console.log('111111111咨询师名单',this.sysUserArr)
      // })
          getZXS().then(res=>{
              this.sysUserArr = res.userList
              // this.consultManId=this.row_record.real_consult_man_id
              // 转诊 的转出人 为 分诊列表的 接收人
              this.form.setFieldsValue({
                ['consultManId']:this.sysUserArr.filter(item=>{ return item.id == this.row_record.real_consult_man_id}).length == 0 ? undefined : this.row_record.real_consult_man_id
              })
              this.spinning = false
            })
      })
    },
    filter(inputValue, path) {
      return path.some(option => option.label.toLowerCase().indexOf(inputValue.toLowerCase()) > -1)
    },
    submit(){
      const { form: { validateFields } } = this
      
      if(!this.confirmLoading){
        this.confirmLoading = true
          validateFields((errors, values) => {
        if (errors) {
          console.log('表单校验未通过111')
          this.confirmLoading=false
          return
        }
        // if(!this.consultManId){
        //   this.$message.info("转出人为空！")
        //   return 
        // }

        values.receiveId= this.row_record.tbReceiveId //接待表id
        values.clientId= this.row_record.clientId //客户id
        values.tbTriageId= this.row_record.tbTriageId //分诊id
        // values.consultManId=this.consultManId
        

        if(this.testArr.length == 0){
           values.quoteItemList=[]
        }else{
           values.quoteItemList=[this.testArr[this.testArr.length-1]]
        }
       

        console.log('表单校验通过222',values)
        referral(values).then(res =>{
          console.log('提交结果为',res)
          if(res.code==200){
            this.$message.success( '转诊成功')
            this.visible=false
            this.$parent.$refs.table.refresh()
          }else{
             this.$message.info({
              content:res.message,
              duration:0.5
            })
          }
        }).finally(()=>{
          this.confirmLoading = false
        })
      })
      }


      
     
    },
    handleCancel () {
      this.form.resetFields()
      this.visible = false
    }
  }
}
</script>

<style lang="less" scoped>
/deep/ .ant-card-head{
  border-bottom: none;
}
/deep/ .ant-card-body{
   padding: 0 24px;
}
/deep/ .ant-card-head-title{
  font-weight: bold;
}
/deep/ .ant-page-header-heading-title{
  font-weight: normal;
  font-size: 16px;
}
.row-wrapper{
  margin-bottom: 30px;
}
.row-wrapper .title{
  font-weight: 800;
  color: #000000;
  font-size: 16px;
  margin-bottom:10px;
}
/deep/ .ant-form-item{
  margin-bottom: 16px;
}
/deep/ .ant-checkbox-group{
  width: 100%;
  display: flex;
  flex-wrap: wrap;
}
/deep/ .ant-checkbox-group .ant-checkbox-group-item{
  /*display: inline-block;*/
  padding: 9px 20px 9px 10px;
  border-radius: 4px;
  border: 1px solid #dcdfe6;
  box-sizing: border-box;
  line-height: normal;
  height: 40px;
}
/deep/ .ant-checkbox-group{
  margin-bottom: 8px;
}
</style>